﻿@using eSeller
@using Eking.Framework
@using eSeller.Models
@model eSeller.Models.EsellerViewModel
@{  
    
    Style.RequireSimple(
        "jQueryUI_Orchard", 
        "jquery.jscrollpane1.css", 
        "fg.menu.css", 
        "jquery.rater.css",
        "eSellerStyle.css");

    Script.RequireSimple(        
        "jQueryUI_Selectable", 
        "jQueryUI_Draggable", 
        "jQueryUI_Resizable",
        "jquery.jscrollpane.min.js", 
        "jquery.mousewheel.js", "fg.menu.js",
        "jquery.rater.js",
        "jquery.unobtrusive-ajax.min.js",
        "MicrosoftAjax.js", 
        "MicrosoftMvcAjax.js",
        "eSellerCodeBehind.js"
        );        
}
<div style="width: 100%" id="eseller">
    <div style="float: left; background: #404040; color: white; text-align: left; width: 100%;"
        id="menuBar">
        <span class="fg-button menuBtn" id="flat"><span id="menuIco"></span><span style="margin-left: 5px;">
            MENU</span></span>
        <input type="search" style="float: right; margin-right: 30px" placeholder="search" />
    </div>
    <div id="menucontent" class="hidden" style="display: block;">
        <div style="float: left; width: 300px; margin: 10px">
            <ul>
                @{                    
                    foreach (var item in Model.ProductCategories)
                    {
                    <li>
                        <div style="position: relative">
                            <span class="mnuItemIco"></span><span style="vertical-align: central; display: block">@item.Name</span>
                        </div>
                    </li>
                    }         
                }
            </ul>
        </div>
        <div style="float: left; display: block">
            adfadfa adfasdf asd fadf
        </div>
    </div>
    <div style="overflow: auto; height: 550px; width: 100%; position: relative" class="scroll-pane" id="uiDataContainer">
        <canvas id="ruler">
        </canvas>
        @{  

            foreach (var p in Model.Products)
            {
                @Html.Partial("ProductItem",p);
            }

            const string catClasses = "category draggable resizable";
            foreach (var cat in Model.ProductCategories)
            {
                var left = Html.GetUiValue(cat.UiData, "Left", "0px");
                var top = Html.GetUiValue(cat.UiData, "Top", "0px");
                <h1 class="@catClasses" style="left:@left; top:@top"  data-Id="@cat.Id" data-CatId="@cat.Id">
                    @cat.Name.ToUpper()
                </h1>
            }
        }
    </div>
    <hr />
    <div style="padding: 2px">
        <button class="flat" id="modeSwitch">
            View</button>
        <span id="editTools">
            <button class="flat" onclick="saveUiData()">
                Save</button>
            <button class="flat">
                Color</button>
            <button class="flat" id="auto">
                Auto</button>
            <button class="flat">
                Ruler</button>
            <button class="flat">
                <
            </button>
            <button class="flat">
                >
            </button>
            <button class="flat">
                ˄
            </button>
            <button class="flat">
                ˅
            </button>
            <button class="flat" id="addProduct">
                Add
            </button>
            <button class="flat" id="deleteSelected">
                Delete
            </button>
            <input type="checkbox" id="showRuler" />
            Ruler
            <button class="flat">
                Type 1</button>
            <button class="flat">
                Type 2</button>
            <button class="flat">
                Type 3</button>
            <button class="flat">
                Type 4</button>
        </span>
    </div>
    <hr />
</div>
